<template>
  <div id="systemAllIncome">
    <el-container>
      <el-main>
        <el-row >
          <el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="计费账期" prop="cycle_id">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="form.cycle_id"
                    type="month"
                    placeholder="计费账期"
                    value-format="yyyyMM"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="业务号码">
                <el-input placeholder="业务号码" v-model="form.serialNumber"></el-input>
              </el-form-item>
            </el-row>
            <el-row class="floatLeft">
              <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="form.trellisCode" filterable placeholder="请选择" >
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager" >
                <el-select  v-model="form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetSearchForm" size="small">重置</el-button>
            </el-row>
          </el-form>
        </el-row>
        <el-row>
          <el-button type="primary" size="small" @click="exportData">导出数据<i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500">
          <el-table-column label="序号"
            type="index"
            width="50"></el-table-column>
          <el-table-column prop="statMonth" label="账期"></el-table-column>
          <el-table-column prop="eparchyCode" label="地市"></el-table-column>
          <el-table-column prop="custId" label="客户编码"></el-table-column>
          <el-table-column prop="userId" label="用户编码"></el-table-column>
          <el-table-column prop="serialNumber" label="业务号码"></el-table-column>
          <el-table-column prop="departId" label="网格编码"></el-table-column>
          <el-table-column prop="holdManagerId" label="客户经理工号"></el-table-column>
          <el-table-column prop="custName" label="客户名称"></el-table-column>
          <el-table-column prop="detailInstallAddress" label="地址" width="200"></el-table-column>
          <el-table-column prop="netTypeCode" label="网别"></el-table-column>
          <el-table-column prop="productId" label="产品编码"></el-table-column>
          <el-table-column prop="removeTag" label="用户状态"></el-table-column>
          <el-table-column prop="linkName" label="联系人"></el-table-column>
          <el-table-column prop="linkPhone" label="联系电话"></el-table-column>
          <el-table-column prop="departKindCode" label=""></el-table-column>
          <el-table-column prop="departName" label="网格名称" width="150"></el-table-column>
          <el-table-column prop="inDate" label="入网时间"></el-table-column>
          <el-table-column prop="destroyTime" label=""></el-table-column>
          <el-table-column prop="userStateCodeset" label=""></el-table-column>
          <el-table-column prop="staffName" label=""></el-table-column>
          <el-table-column prop="oaSystemAcct" label="销户时间"></el-table-column>
          <el-table-column prop="netTypeName" label="网别名称"></el-table-column>
          <el-table-column prop="netTypeClass" label="网别类型"></el-table-column>
          <el-table-column prop="productName" label="产品名称"></el-table-column>
          <el-table-column prop="fee" label="出账费用"></el-table-column>
          <el-table-column prop="adjustFee" label="调账费用"></el-table-column>
          <el-table-column prop="giveFee" label="赠费费用"></el-table-column>
          <el-table-column prop="netFee" label="最终费用"></el-table-column>
<!--          <el-table-column prop="sysDate1" label=""></el-table-column>-->
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
      </el-main>
    </el-container>
    <router-view/>
  </div>
</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {formatDate} from '../../components/utils/formatDate'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import {
    downloadTemplate,
    getBaseDataList,
    queryContractErpImportantList,
    queryContractErpListCount,
    getDept,
    getDeptStaff,downLoadData
  } from '../../components/utils/getDataFn'
  import global from '../../components/utils/global'

  export default {
    name: 'systemAllIncome',
    created () {
      var staffId = getUrlParams('staffId');
      this.staffId = getUrlParams('staffId')
      sessionStorage.setItem("staffId",this.staffId);
      getBaseDataList(1001, this)
      getBaseDataList(2001, this)
      getDept(this);
    },
    methods: {

      exportData () {
        let _this = this
        this.$refs['form'].validate((valid) => {
        debugger
          if (valid) {
            _this.getQueryParams()
            axios({
              methods: 'get',
              url: global.host + '/tfFBigcustUserAll/download',
              params: {params: JSON.stringify(_this.queryParams)},
              responseType: 'blob'
            }).then(res => {
              downLoadData(res);
            }).catch()
          }
        })
      },
      handleClick (row) {
        console.log(row)
      },
      getStaffsFirst(){
        this.form.yzStaffId='';
        getDeptStaff(this.form.trellisCode,this);
      }   ,
      getStaffs(){
        this.dialog.form.yzStaffId='';
        getDeptStaff(this.dialog.form.trellisCode,this);
      }   ,
      resetSearchForm() {
        for (let item in this.form) {
          this.form[item] = ''
        }
      },
      searchFn () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return;
          }
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryAll()
        this.queryAllCount()
      })},
      onSubmit () {
        this.queryAll()
        this.queryAllCount()
      },
      queryAll: function () {
        let _this = this
        _this.getQueryParams()
      debugger
        axios({
          methods: 'get',
          url: global.host+'/tfFBigcustUserAll/queryAll',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryAllCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/tfFBigcustUserAll/queryAllCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNoGlobal: this.form.contractNoGlobal,
          yzStaffId: this.form.yzStaffId,
          trellisCode: this.form.trellisCode,
          signWay: this.form.signWay,
          staffId: this.staffId,
          serialNumber: this.form.serialNumber,
          cycleId:this.form.cycle_id
        }
      },
    }
    ,
    data () {
      return {
        staffs:[],
        depts:[],
        staffId:'',
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form:{
          contractName: '',
          contractNoGlobal: '',
          yzStaffId: '',
          accountManager: '',
          trellisCode: '',
          trellisName: '',
          signWay: '',
          serialNumber:'',
          cycle_id:''
        },
        rules: {
          cycle_id: [{required: true, message: '账期', trigger: 'change'}],
        }
      }
    }
  }
</script>

<style>
  #systemAllIncome {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
